<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/vue.js"></script>
    <link rel="stylesheet" href="app.css"></link>
</head>
<body>
<script type="text/javascript">
</script>
<div id="app-1">
    <comp v-on:make-counter="listenerCounterEvent">0</comp>
</div>
</body>
<script type="text/javascript">
    Vue.component('comp',{
        template:'<button v-on:click="makeCounterMethod">{{counter}}</button>',
        data:function(){
            return {
                counter:0
            }
        },
        methods:{
            makeCounterMethod:function(){
                console.log("makeCounter is active");
                this.$emit('make-counter')
            }
        }
    });
    var app = new Vue({
        el:"#app-1",
        data:{
            counter:0
        },
        methods:{
            listenerCounterEvent:function(){
               console.log("获得子组件的makeCounter发来的监听事件");
            }
        }
    });
</script>
</html>